<template>
<div class="viewport">
    <searchContainer />
    <!--这里首页的滚动区，接后台的时候可以进行for循环遍历出来-->
    <swiper :options="swiperOption">
        <swiper-slide><img style="width:100%;" src="@/assets/img/banner.png" /></swiper-slide>
        <swiper-slide><img style="width:100%;" src="@/assets/img/banner.png" /></swiper-slide>
        <swiper-slide><img style="width:100%;" src="@/assets/img/banner.png" /></swiper-slide>
        <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
    <!--这是分类区-->
    <div class="quick-nav-box">
        <nav class="quick-entry-nav clearfix">
            <a class="quick-entry-link" href="">
                <span class="quick-box">
                    <img src="http://image.yiguoaixin.com/lm/20181127/2RxllBHa5HnIKth.png" alt="">
                    <span>手机</span>
                </span>
            </a>
            <a class="quick-entry-link" href="">
                <span class="quick-box">
                    <img src="http://image.yiguoaixin.com/lm/20181127/iMVz9ndlZM4j7d4.png" alt="">
                    <span>平板</span>
                </span>
            </a>
            <a class="quick-entry-link" href="">
                <span class="quick-box">
                    <img src="http://image.yiguoaixin.com/lm/20181127/dPFik7KZ3HMrpnd.png" alt="">
                    <span>笔记本</span>
                </span>
            </a>
            <a class="quick-entry-link" href="">
                <span class="quick-box">
                    <img src="http://image.yiguoaixin.com/lm/20181127/8cwQaWm0jXbgZSK.png" alt="">
                    <span>电脑办公</span>
                </span>
            </a>
            <a class="quick-entry-link" href="">
                <span class="quick-box">
                    <img src="http://image.yiguoaixin.com/lm/20181127/T9Nyr5R86TrtaBg.png" alt="">
                    <span>手机配件</span>
                </span>
            </a>
            <a class="quick-entry-link" href="">
                <span class="quick-box">
                    <img src="http://image.yiguoaixin.com/lm/20181127/iH9t9OMNMZdieK5.png" alt="">
                    <span>摄像</span>
                </span>
            </a>
            <a class="quick-entry-link" href="">
                <span class="quick-box">
                    <img src="http://image.yiguoaixin.com/lm/20181127/Z7kwkK9tUuUIcbm.png" alt="">
                    <span>影音</span>
                </span>
            </a>
            <a class="quick-entry-link" href="">
                <span class="quick-box">
                    <img src="http://image.yiguoaixin.com/lm/20181127/HtQj90OAZo7rfw6.png" alt="">
                    <span>智能设备</span>
                </span>
            </a>
            <a class="quick-entry-link" href="">
                <span class="quick-box">
                    <img src="http://image.yiguoaixin.com/lm/20181127/QkFs3N7xzCxqDJn.png" alt="">
                    <span>电子教育</span>
                </span>
            </a>
            <a class="quick-entry-link" href="">
                <span class="quick-box">
                    <img src="http://image.yiguoaixin.com/lm/20181127/6IqBBzWNo8lutL9.png" alt="">
                    <span>数码配件</span>
                </span>
            </a>
        </nav>
    </div>
    <div class="grid-floor">
        <div class="grid-wrapper col1">
            <ul class="clearfix">
                <li>
                    <a>
                        <img src="http://image.yiguoaixin.com/recommanditem/20181127/MqjexuCdgfsNpct.png" alt="">
                    </a>
                </li>
            </ul>
        </div>
        <div class="grid-wrapper col3">
            <ul class="clearfix">
                <li>
                    <a>
                        <img src="http://image.yiguoaixin.com/recommanditem/20181127/w3OnmlyiHKDVyzR.png" alt="">
                    </a>
                </li>
                <li>
                    <a>
                        <img src="http://image.yiguoaixin.com/recommanditem/20181127/KuLTxe4yPW6I7pP.png" alt="">
                    </a>
                </li>
                <li>
                    <a>
                        <img src="http://image.yiguoaixin.com/recommanditem/20181127/EqehSAeAzeOR2Ru.png" alt="">
                    </a>
                </li>
            </ul>
        </div>
        <div class="grid-wrapper col1">
            <ul class="clearfix">
                <li>
                    <a>
                        <img src="http://image.yiguoaixin.com/recommanditem/20181127/2mkpN6VVaLXDYf7.png" alt="">
                    </a>
                </li>
            </ul>
        </div>
        <div class="grid-wrapper col3">
            <ul class="clearfix">
                <li>
                    <a>
                        <img src="http://image.yiguoaixin.com/recommanditem/20181127/iM7UtJplhiprYlg.png" alt="">
                    </a>
                </li>
                <li>
                    <a>
                        <img src="http://image.yiguoaixin.com/recommanditem/20181127/CyGmPuYx5yFvm1j.png" alt="">
                    </a>
                </li>
                <li>
                    <a>
                        <img src="http://image.yiguoaixin.com/recommanditem/20181127/WdEX6iIZWikBpUQ.png" alt="">
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!--这是推荐模块-->
    <div class="recommend-tit">为你推荐</div>
    <div class="pro-container large-show">
        <ul class="clearfix">
            <li>
                <router-link to="/product">
                    <div class="item">
                        <div class="img">
                        <img src="http://image.yiguoaixin.com/prodMainPic/20181127/FKCCnrHBWOSpqrk.jpg" alt="">
                        </div>
                    </div>
                    <div class="info">
                        <div class="title">iPhone 7</div>
                        <div class="price">
                        <i>￥</i>3699</div>
                    </div>
                </router-link>
            </li>
            <li>
                <router-link to="/product">
                    <div class="item">
                        <div class="img">
                        <img src="http://image.yiguoaixin.com/prodMainPic/20181127/FKCCnrHBWOSpqrk.jpg" alt="">
                        </div>
                    </div>
                    <div class="info">
                        <div class="title">iPhone 7</div>
                        <div class="price">
                        <i>￥</i>3699</div>
                    </div>
                </router-link>
            </li>
            <li>
                <router-link to="/product">
                    <div class="item">
                        <div class="img">
                        <img src="http://image.yiguoaixin.com/prodMainPic/20181127/FKCCnrHBWOSpqrk.jpg" alt="">
                        </div>
                    </div>
                    <div class="info">
                        <div class="title">iPhone 7</div>
                        <div class="price">
                        <i>￥</i>3699</div>
                    </div>
                </router-link>
            </li>
            <li>
                <router-link to="/product">
                    <div class="item">
                        <div class="img">
                        <img src="http://image.yiguoaixin.com/prodMainPic/20181127/FKCCnrHBWOSpqrk.jpg" alt="">
                        </div>
                    </div>
                    <div class="info">
                        <div class="title">iPhone 7</div>
                        <div class="price">
                        <i>￥</i>3699</div>
                    </div>
                </router-link>
            </li>
        </ul>
    </div>
</div>
</template>
<script>
import SearchContainer          from "@/components/web/public/SearchContainer"
import { swiper, swiperSlide }  from 'vue-awesome-swiper'
import Home                     from "@/service/home-service.js"

const 	_home	=	new Home();
export default {
  name: 'home',
  data () {
    return {
        swiperOption:{
            pagination:{
                el: '.swiper-pagination',
                clickabel:true
            },
            autoplay:{
              delay:3000,
              disableOnInteraction:false
            },
            spaceBetween: 30,
            loop: true,
        }
    }
  },
  mounted(){
    document.documentElement.scrollTop = 0;
    _home.menuList({}).then((res)=>{
        alert(1);
         console.log(res)
    },(errMsg)=>{
        console.log(errMsg)
    })

  },
  components:{
    searchContainer:SearchContainer,
    swiper,
    swiperSlide,
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* 这是滚动区的样式 */
.swiper-container {
  width: 100%;
  height: 4.0rem;
}
/* 这是分类区的样式 */
.quick-nav-box {
    margin-bottom: .20rem;
    padding: .16rem .2rem;
    background: #fff;
    display: table;
}
.quick-nav-box .quick-entry-nav {
    width: 100%;
}
.quick-nav-box .quick-entry-nav .quick-entry-link {
    position: relative;
    float: left;
    display: block;
    width: 20%;
    padding: .16rem 0;
    text-align: center;
}
.quick-nav-box .quick-entry-nav .quick-box img {
    margin: 0 auto .1rem;
    width: .96rem;
    height: .96rem;
}
.quick-nav-box .quick-entry-nav .quick-box span {
    font-size: 0.28rem;
    display: box;
    box-orient: vertical;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    line-clamp: 1;
    -webkit-line-clamp: 1;
}

/* 这是楼层的样式 */
.grid-floor {
    display:table;
}
.grid-wrapper li {
    float: left;
}
.grid-wrapper.col3 li {
    width: 33.33%;
}
.grid-wrapper li a img {
    width: 100%;
    height: 100%;
}
</style>
